import { Component } from 'react';
import Taro from '@tarojs/taro';
import { ScrollView, View, Image } from '@tarojs/components'
import { AtMessage } from 'taro-ui'
import Iconfont from '@/components/Iconfont'
import { staticUrl } from '@/utils'
import './index.scss'

type Prop = {
  list: Array<any>
}
export default class List extends Component<Prop, {}> {
	static defaultProps = {
		list: []
	}
	constructor(props) {
		super(props)
	}

	handleClick(item) {
		let {thirdReportId,thirdSn,reportId} = item
		if(thirdReportId && thirdSn){
			let path = '/check/report'
			Taro.navigateTo({
				url: `/pages/webview/index/index?path=${path}&query=${JSON.stringify({reportId:reportId})}`
			})
		}else{
			Taro.navigateTo({
				url: `/pages/detection/detail/index?reportId=${item.reportId}&title=${item.typeLabel}`
			})
		}
	}

	UNSAFE_componentWillMount() {
		console.log('this', this)
	}

	render() {
		const { list } = this.props
		const scrollStyle = {
			height: '100vh'
		}
		return (
			<View className='list-wrap'>
				<ScrollView className='list' enableBackToTop={true} scrollY={true} style={scrollStyle}>
					{list.map((item) =>
						<View className='item' key={item.carLicense}>
							<View className='head'>
								<View className='car-license'>
									<Image lazyLoad={true} mode='aspectFit' src={item.logo}></Image>
									<View className='license'>{item.carLicense}</View>
									<View className='series'>{item.carSeries}</View>
								</View>
								<View className='in-store-date'>{item.arrivalAt} 到店</View>
							</View>
							<View className='content'>
								{item.checkList.map((checkItem) =>
									<View className='content-item' hover-class="active" key={checkItem.reportId} onClick={this.handleClick.bind(this, checkItem)}>
										<View className='left'>
											<View className='icon'>
												<Image className='icon-class' mode='aspectFit' src={staticUrl(`/img/user/record/${checkItem.type}.png`)}></Image>
												{/* {Number(checkItem.type) === 0 && <Iconfont size="64" color="#3889f7" name="icon-jiechejiancha" />}
												{Number(checkItem.type) === 1 && <Iconfont size="64" color="#4eb2f9" name="icon-xiangjiance" />} */}
											</View>
											<View className='name-date'>
												<View className='name'>{checkItem.typeLabel}</View>
												<View className='date'>{checkItem.checkedAt}</View>
											</View>
										</View>
										<View className='right'>
											{checkItem.focus > 0 && <View className='tab need-atten'>需关注{checkItem.focus}项</View>}
											{checkItem.normal > 0 && <View className='tab normal'>正常{checkItem.normal}项</View>}
											<Iconfont size="32" color="#666666" name="icon-jiantourukou" />
										</View>
									</View>
								)}
							</View>
						</View>
					)}
				</ScrollView>
				<AtMessage />
			</View>
		)
	}
}
